<template>
    <div class="home-main">
        <!-- <audio class="audio-box" autoplay="autoplay" loop="loop"  preload="auto" controls="controls" src="https://webfs.tx.kugou.com/202111240953/3c7d0fc0f2cdbfcad3046d8706bd2f72/KGTX/CLTX001/4bd025b0a40e75da5d88243c46b18e62.mp3"></audio> -->
        <a-layout>
            <a-layout-header class="header-top">
                <div>
                    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                </div>
                <span class="header-title">Exclusive space for Mr.Duan and Ms.Chen</span>
            </a-layout-header>
            <a-layout style="margin-top: 2px;">
                <a-layout-sider class="slider-box">
                    <menu-list :menus="menus" :defaultKeys="defaultKeys" :rootKeys="rootKeys" @select-key="selectkey"></menu-list>
                </a-layout-sider>
                <a-layout-content>
                  <image-wall :images="images" v-if="currentKey === 1"></image-wall>
                  <swiper-wall v-if="currentKey === 2"></swiper-wall>
                  <div class="fixed-div">
                      <img src="../image/snow-person.png" alt="" height="50px">
                  </div>
                  <div class="fixed-div-1">
                      <img src="../image/person-icon-1.png" alt="" height="50px">
                  </div>
                </a-layout-content>
            </a-layout>
        </a-layout>
        <div class="bottom-img">
        </div>
        <div class="fixed-box">
            <figure class="container">
                <div class="sun"><img src="../image/touxiang/sun-icon.jpg" alt="" height="80px" style="border-radius: 30%;"></div>
                <div class="earth">
                    <div class="moon"></div>
                </div>
            </figure>
        </div>
    </div>
</template>
<style lang="less" scoped>
.fixed-box {
    position: fixed;
    right: 30px;
    bottom: 60px;
    h1 {
        color: white;
        font-size: 60px;
        font-family: Lobster, monospace;
        font-weight: 100;
    }
    .container {
        font-size: 10px;
        width: 40em;
        height: 40em;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sun {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10em;
        height: 10em;
        background: linear-gradient(#fcd670, #f2784b);
        border-radius: 50%;
        box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
    }

    .earth {
        --diameter: 30;
        --duration: 36.5;
    }

    .moon {
        --diameter: 8;
        --duration: 2.7;
        top: 0.3em;
        right: 0.3em;
    }

    .earth,
    .moon {
        position: absolute;
        width: calc(var(--diameter) * 1em);
        height: calc(var(--diameter) * 1em);
        border-width: 0.1em;
        border-style: solid solid none none;
        border-color: silver transparent transparent transparent;
        border-radius: 50%;
        animation: orbit linear infinite;
        animation-duration: calc(var(--duration) * 1s);
    }

    @keyframes orbit {
        to {
            transform: rotate(1turn);
        }
    }

    .earth::before {
        --diameter: 4;
        --color: linear-gradient(#19b5fe, #7befb2);
        --top: 2.8;
        --right: 2.8;
    }

    .moon::before {
        --diameter: 1.5;
        --color: linear-gradient(#8d6e63, #ffe0b2);
        --top: 0.8;
        --right: 0.2;
    }

    .earth::before {
        content: "";
        position: absolute;
        width: calc(var(--diameter) * 1em);
        height: calc(var(--diameter) * 1em);
        background: var(--color);
        background: url('../image/touxiang/earth-icon.jpg') no-repeat;
        background-size: cover;
        border-radius: 50%;
        top: calc(var(--top) * 1em);
        right: calc(var(--right) * 1em);
    }
    .moon::before {
        content: "";
        position: absolute;
        width: calc(var(--diameter) * 1em);
        height: calc(var(--diameter) * 1em);
        background: var(--color);
        border-radius: 50%;
        top: calc(var(--top) * 1em);
        right: calc(var(--right) * 1em);
    }
}
.home-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    .header-top {
        display: flex;
        align-items: center;
        background: #ce7adf;
        box-shadow: 2px 2px 2px #f0e7e7;
        height: 7%;
    }
    .slider-box {
        background: #f5f5f5;
        box-shadow: 2px 2px 2px #f0e7e7;
    }
    .bottom-img {
        height: 48px;
        background-image: linear-gradient(90deg, rgba(238, 238, 230, 0.87), rgba(0,0,255,0.5)),;
    }
}
.audio-box {
    position: absolute;
    top: 60px;
    right: 20px;
}
.header-title {
    display: block;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 auto;
}
.fixed-div {
    position: fixed;
    bottom: 48px;
    right: 20px;
    animation: myfirst 15s infinite;
}
.fixed-div-1 {
    position: fixed;
    bottom: 48px;
    right: 25px;
    animation: jumpaction 10s linear infinite;
}
@keyframes jumpaction 
{
    0% { bottom: 48px; right: 0%}
    25% {bottom: 368px; right: 20%}
    50% {bottom: 48px; right: 50%}
    75% {bottom: 368px; right: 75%;}
    100% { bottom: 48px; right: 100%;}
}

@keyframes myfirst
{
	0%   { transform: rotate(0.1turn); right: 0%;}
	25%  { transform: rotate(-0.1turn); right: 25%;}
	50%  { transform: rotate(0.1turn); right: 50%;}
	75%  { transform: rotate(-0.1turn); right: 75%;}
	100% { transform: rotate(0.1turn); right: 100%;}
}
</style>
<script>
import ImageWall from '../components/ImageWall.vue';
import MenuList from '../components/MenuList.vue';
import imageData from '../mock.js';
import SwiperWall from '../components/SwiperWall.vue';

export default {
    name: 'Home',
    props: {},
    data() {
        return {
            images: imageData,
            defaultKeys: ['子菜单1'],
            rootKeys: ['子菜单1','子菜单2','子菜单3'],
            menus: [
                {
                    mainKey: '子菜单1',
                    children: [
                        {
                            key: 1,
                            name:'照片墙'
                        },
                        {
                            key: 2,
                            name: '照片轮播'
                        }
                    ]
                },
                {
                    mainKey: '子菜单2',
                    children: [
                        {
                            key: 3,
                            name: '照片分布图'
                        },
                        {
                            key: 4,
                            name: '去过的地方'
                        }
                    ]
                },
                {
                    mainKey: '子菜单3',
                    children: []
                },
            ],
            currentKey: 1,
        }
    },
    methods: {
        init() {
            console.log(this.images)
        },
        onOpenChange(openKeys) {
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
              this.openKeys = openKeys;
            } else {
              this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        },
        selectkey(selectObj) {
            this.currentKey = selectObj.key;
        },
    },
    components: {
        ImageWall,
        MenuList,
        SwiperWall,
    },
    mounted() {
        this.$nextTick(() => {
            this.init();
            window.addEventListener('resize', this.resizeCanvas,false)
        })
    }

}
</script>